<template>
  <div ref="chart" style="width:100%;height:376px"></div>
</template>

<script>
  export default {
    props: {
      xAxis: {
        type: Array,
        default: () => [],
      },
      yAxis: {
        type: Array,
        default: () => [],
      },
      series: {
        type: Array,
        default: () => [],
      },
      legend: {
        type: Array,
        default: () => [],
      },
    },
    mounted() {
      this.initCharts();
    },
    methods: {
      initCharts() {
        const myChart = echarts.init(this.$refs.chart);
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
            },
          },
          legend: {
            data: this.legend,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.xAxis,
          },
          yAxis: this.yAxis,
          series: this.series,
        };
        myChart.setOption(option);
        window.addEventListener('resize', function() {
          myChart.resize();
        });

        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', function() {
            myChart.resize();
          });
        });
      },
    },
  };
</script>

<style></style>
